<template>
  <picker
    class="selector"
    mode="selector"
    :range="list"
    @change="onChange($event, item)"
  >
    <view class="show-text">{{ showText }} </view>
    <image
      src="@/static/image/select-icon.png"
      class="select-icon"
      mode="widthFix"
    ></image>
  </picker>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
    },
    list: {
      type: Array,
    },
  },
  data() {
    return {
      showText: '',
    };
  },
  computed: {},
  watch: {
    value: {
      handler(val) {
        this.showText = val;
      },
      immediate: true,
    },
  },
  methods: {
    onChange(e) {
      this.showText = this.list[e.detail.value];
      this.$emit('input', this.showText);
    },
  },
};
</script>

<style lang="less" scoped>
.selector {
  position: relative;
}
.show-text {
  width: 100%;
  height: 45rpx;
  box-sizing: border-box;
  padding: 0 30rpx 0 10rpx;
  justify-content: center;
  background-image: url('https://web.skyelook.com/kf/adidas/miniprogram/球队认证/矩形 3 拷贝 4@2x.png');
}
.select-icon {
  position: absolute;
  right: 10rpx;
  width: 20rpx;
  top: 50%;
  transform: translateY(-50%);
}
</style>
